<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<title>监狱人员后台管理系统</title>
		<link rel="icon" href="favicon.ico" type="image/ico">
		<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
		<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
		<meta name="author" content="yinqi">
		<link href="res/css/bootstrap.min.css" rel="stylesheet">
		<link href="res/css/materialdesignicons.min.css" rel="stylesheet">
		<link href="res/css/animate.css" rel="stylesheet">
		<link href="res/css/style.min.css" rel="stylesheet">
		<link href="res/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
	</head>

	<body>
		<div class="container-fluid p-t-15">

			<div class="row">
				<div class="col-lg-12">

					<div class="card">
						<div class="card-header">
							<h4>后台管理员</h4>
						</div>

						<div class="card-body">

							<div id="toolbar" class="toolbar-btn-action">
								<button id="btn_add" type="button" class="btn btn-primary" data-toggle="modal"
									data-target="#exampleModal" data-whatever="@mdo">新增部门</button>
								<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
									aria-labelledby="exampleModalLabel">
									<div class="modal-dialog" role="document">

										<div class="modal-content">

											<div class="modal-header">
												<button type="button" class="close" data-dismiss="modal"
													aria-label="Close"><span aria-hidden="true">&times;</span></button>
											</div>

											<!-- 新增 -->
											<div class="card-body">
												<form action="" method="post" onsubmit="return false;" name="DepartForm"
													id="DepartForm">
													<input type="text" hidden="hidden" id="submitType" value="add" />
													<input type="text" id="id" name="id" hidden="hidden">
													<div class="form-group">
														<label for="departmentname">部门名称</label>
														<input class="form-control" type="text" id="departmentname"
															name="departmentname" placeholder="请输入部门名称..">
													</div>
													<div class="form-group">
														<button class="btn btn-primary" type="submit"
															onclick="formSubmit()">确定</button>
													</div>
												</form>
											</div>


										</div>
									</div>
								</div>
							</div>

							<div class="modal fade" id="showDetail" tabindex="-1" role="dialog"
								aria-labelledby="exampleModalLabel">
								<div class="modal-dialog" role="document">
									<div class="modal-content">
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal"
												aria-label="Close"><span aria-hidden="true">&times;</span></button>

										</div>
										<!--查看-->
										<div class="card-body">
											<div class="col-lg-4" style="width:100%;">

												<h2 style="text-align: center;" id="Querydepartmentname">Heading</h2>

												<p id="DepartDetails" style="text-align: center;">Donec sed odio dui.
													Etiam porta sem malesuada magna mollis euismod.
													Nullam id
													dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta
													ac
													consectetur ac, vestibulum at eros. Praesent commodo cursus magna.
												</p>
											</div>
										</div>

										<div class="modal-footer">
											<button type="button" class="btn btn-default"
												data-dismiss="modal">关闭</button>
										</div>

									</div>
								</div>
							</div>
							<table id="tb_departments">

							</table>

						</div>
					</div>
				</div>



			</div>

		</div>

		<script type="text/javascript" src="res/js/jquery.min.js"></script>
		<script type="text/javascript" src="res/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="res/js/perfect-scrollbar.min.js"></script>
		<script type="text/javascript" src="res/js/bootstrap-table/bootstrap-table.min.js"></script>
		<script type="text/javascript" src="res/js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>

		<!--行内编辑插件-->
		<link href="res/js/x-editable/1.5.1/bootstrap3-editable/css/bootstrap-editable.min.css" rel="stylesheet">
		<script type="text/javascript" src="res/js/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.min.js">
		</script>
		<script type="text/javascript" src="res/js/bootstrap-table/extensions/editable/bootstrap-table-editable.min.js">
		</script>

		<script type="text/javascript" src="res/js/main.min.js"></script>
		<script type="text/javascript">
			$('#tb_departments').bootstrapTable({
				classes: 'table table-bordered table-hover table-striped',
				url: '/Final_ssm2/Depart/Der_table',
				method: 'get',
				dataType: 'json',
				uniqueId: 'id',
				idField: 'id', // 每行的唯一标识字段
				toolbar: '#toolbar', // 工具按钮容器
				clickToSelect: true, // 是否启用点击选中行
				showColumns: true, // 是否显示所有的列
				showRefresh: true, // 是否显示刷新按钮
				contentType: "application/x-www-form-urlencoded",
				success: function(data) {
					console.log(data)
				},
				//showToggle: true,        // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)

				pagination: true, // 是否显示分页
				sortOrder: "asc", // 排序方式
				queryParams: function(params) {
					var temp = {
						limit: params.limit, // 每页数据量
						offset: params.offset, // sql语句起始索引
						page: (params.offset / params.limit) + 1,
						sort: params.sort, // 排序的列名
						sortOrder: params.order // 排序方式'asc' 'desc'
					};
					return temp;
				}, // 传递参数
				sidePagination: "server", // 分页方式：client客户端分页，server服务端分页
				pageNumber: 1, // 初始化加载第一页，默认第一页
				pageSize: 5, // 每页的记录行数
				pageList: [10, 25, 50, 100], // 可供选择的每页的行数

				columns: [{
					checkbox: true // 是否显示复选框
				}, {
					field: 'id',
					title: 'ID',
					sortable: true // 是否排序
				}, {
					field: 'departmentname',
					title: '部门名称'
				}, {
					field: 'count',
					title: '在职人数',
				}, {
					field: 'operate',
					title: '操作',
					formatter: btnGroup, // 自定义方法
					events: {
						'click .edit-btn': function(event, value, row, index) {
							editUser(row.id);
						},
						'click .del-btn': function(event, value, row, index) {
							delUser(row.id);
						},
						'click .show-btn': function(event, value, row, index) {
							showUser(row.id);
						}
					}
				}],

				onLoadSuccess: function(data) {
					$("[data-toggle='tooltip']").tooltip();
				}
			});
			// 操作按钮
			function btnGroup() {
				let html =
					'<a href="#!" class="btn btn-xs btn-default m-r-5 edit-btn" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>' +
					'<a href="#!" class="btn btn-xs btn-default m-r-5 show-btn" title="查看" data-toggle="tooltip"><i class="mdi mdi-eye"></i></a>' +
					'<a href="#!" class="btn btn-xs btn-default del-btn" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>';
				return html;
			}

			// 操作方法 - 编辑
			function editUser(id) {
				$('#id').val(id);
				$('#submitType').attr('value','edit');
				$('#exampleModal').modal('show');
				$.ajax({
					url: '/Final_ssm2/Depart/getDetail?id=' + id,
					dataType: 'json',
					type: 'get',
					success(res) {
						console.log(res);
						if (res.message === "success") {
							$('#departmentname').val(res.data.departmentname);
						} else if ((res.message === "error")) {
							alert('查看失败！');
						} else if ((res.message === "error_permission")) {
							alert('无权限！');
							
						} else {
							alert('未知错误！');
						}
					},
					error() {
						alert('系统错误');
					}
				})
			}
			// 操作方法 - 删除
			function delUser(id) {
				$.ajax({
					url: '/Final_ssm2/Depart/delete?id=' + id,
					dataType: 'json',
					type: 'get',
					success(res) {
						console.log(res);
						if (res.message === "success") {
							alert('删除成功！');
							$('#tb_departments').bootstrapTable('refresh');
						} else if ((res.message === "error")) {
							alert('查看失败！');
						} else if ((res.message === "error_permission")) {
							alert('无权限！');
						} else {
							alert('未知错误！');
						}
					},
					error() {
						alert('系统错误');
					}
				})
			}
			// 操作方法 - 查看
			function showUser(id) {
				$('#showDetail').modal('show');
				$.ajax({
					url: '/Final_ssm2/Depart/queryDepartDetail?id=' + id,
					dataType: 'json',
					type: 'get',
					success(res) {
						console.log(res);
						if (res.message === "success") {
							var department = res.data;
							$('#id').val(id);
							$("#Querydepartmentname").html(department.departmentname);
							$("#DepartDetails").html(department.departmenDetails);
						} else if ((res.message === "error")) {
							alert('查看失败！');
						} else if ((res.message === "error_permission")) {
							alert('无权限！');
						} else {
							alert('未知错误！');
						}
					},
					error() {
						alert('系统错误');
					}
				})
			}

			function add() {
				$.ajax({
					url: '/Final_ssm2/Depart/add',
					dataType: 'json',
					type: 'get',
					data: {
						departmentname: $('#departmentname').val(),
					},
					success(res) {
						console.log(res);
						if (res.message === "success") {
							alert('添加成功！');
							$('#tb_departments').bootstrapTable('refresh');
							$('#departmentname').val('');
						} else if ((res.message === "error")) {
							alert('查看失败！');
						} else if ((res.message === "error_permission")) {
							alert('无权限！');
						} else {
							alert('未知错误！');
						}
					},
					error() {
						alert('系统错误');
					}
				})
			}

			function formSubmit() {
				//表单类型：1、添加 2、查看 3、修改
				var submitType = $('#submitType').val();
				if (submitType === "add") {
					$('#DepartForm').bootstrapTable("removeAll");
					add();
				} else if (submitType === "edit") {
					$.ajax({
						url: '/Final_ssm2/Depart/edit',
						dataType: 'json',
						type: 'post',
						data: {
							id: $('#id').val(),
							departmentname: $('#departmentname').val(),

						},
						success(res) {
							console.log(res);
							if (res.message === "success") {
								alert('修改成功！');
								$('#tb_departments').bootstrapTable('refresh');
								$('#id').val('');
								$('#departmentname').val('');
							} else if ((res.message === "error")) {
								alert('查看失败！');
							} else if ((res.message === "error_permission")) {
								alert('无权限！');
							} else {
								alert('未知错误！');
							}
						},
						error() {
							alert('系统错误');
						}
					})
				} else if (submitType === "look") {
					$('#exampleModal').modal('hide');
				}
			}

			//窗口关闭事件监听
			$("#exampleModal").on("hide.bs.modal", function() {
				console.log("------");
				$('#submitType').attr('value','add');
				$("#departmentname").val("");
			});
		</script>

	</body>
</html>
